<template>
  <div v-loading="proDetailLoading" class="proDetail">
    <ContentWrap>
      <div class="table-list-box">
        <el-table
          border
          :height="tableHeight"
          highlight-current-row
          header-row-class-name="table-list-header"
          tooltip-effect="dark"
          style="width: 100%"
          :data="productInfo"
        >
          <el-table-column type="index" :index="indexMethod" label="序号" width="50" align="center" />
          <el-table-column prop="isSample" label="样品" width="50" align="center">
            <template slot-scope="scope">{{ scope.row.isSample === 1 ? '是' : scope.row.isSample === 0 ? '否' : '--' }}</template>
          </el-table-column>
          <el-table-column prop="isGift" label="赠品" width="50" align="center">
            <template slot-scope="scope">{{ scope.row.isGift === 1 ? '是' : scope.row.isGift === 0 ? '否' : '--' }}</template>
          </el-table-column>
          <el-table-column prop="productCode" label="产品编码" width="120" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="productName" label="产品名称" width="200" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="color" label="产品颜色" width="80" align="center">
            <template slot-scope="scope">{{ scope.row.hasOwnProperty('color') && scope.row.color !== '' ? scope.row.color : '--' }}</template>
          </el-table-column>
          <el-table-column prop="groupAmount" label="搭配数量" width="80" align="center">
            <template slot-scope="scope">{{ scope.row.hasOwnProperty('groupAmount') && scope.row.groupAmount !== '' ? scope.row.groupAmount : '--' }}</template>
          </el-table-column>
          <el-table-column prop="salePrice" label="标价" width="80" align="center" />
          <el-table-column prop="quantity" label="数量" width="80" align="center" />
          <el-table-column prop="discount" label="折扣" width="80" align="center">
            <template slot-scope="scope">{{ scope.row.hasOwnProperty('discount') && scope.row.discount !== '' ? scope.row.discount : '--' }}</template>
          </el-table-column>
          <el-table-column prop="returnedQuantity" label="退货数量" width="80" align="center" />
          <el-table-column prop="price" label="单价" width="80" align="center" />
          <el-table-column prop="amount" label="金额" width="80" align="center" />
          <el-table-column prop="rowYhPrice" label="单行优惠金额" width="100" align="center">
            <template slot-scope="scope">{{ scope.row.hasOwnProperty('rowYhPrice') && scope.row.rowYhPrice !== '' ? scope.row.rowYhPrice : '--' }}</template>
          </el-table-column>
          <el-table-column prop="rowDealPrice" label="单行成交金额" width="100" align="center">
            <template slot-scope="scope">{{ scope.row.hasOwnProperty('rowDealPrice') && scope.row.rowDealPrice !== '' ? scope.row.rowDealPrice : '--' }}</template>
          </el-table-column>
          <el-table-column prop="completeQuantity" label="完工量" align="center" />
          <!-- <el-table-column prop="arrangedQuantity" label="预占量" align="center" /> -->
          <el-table-column prop="comments" label="备注" width="200" :show-overflow-tooltip="true" align="center" />
        </el-table>
      </div>
    </ContentWrap>
  </div>
</template>

<script>
import ContentWrap from '@/components/ContentWrap'
export default {
  components: {
    ContentWrap
  },
  props: {
    productInfo: {
      type: Array,
      default: () => ([])
    },
    cheight: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      proDetailLoading: true,
      tableHeight: 400
    }
  },
  created() {
    this.proDetailLoading = false
  },
  methods: {
    indexMethod(index) {
      return index + 1
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
